<template>
	<view>
		<cu-custom bgColor="bg-cyan" :isBack="true"><block slot="backText">返回</block><block slot="content">二手物品</block></cu-custom>
		<view class="search-main" :style="'background-image:url('+m.site.weiBo+')'">
			<view class="cu-bar search">
				<view class="cu-avatar round" :style="'background-image:url('+m.site.siteLogo+')'"></view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="search" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
				</view>
				<!-- <view class="action">
					<button class="cu-btn bg-green shadow-blur round">搜索</button>
				</view> -->
			</view>
		</view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text> 分类信息
			</view>
		</view>
		<view class="cu-list grid col-4">
			<view class="cu-item" v-for="(item,index) in cuIconList" :key="index">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="adv">
			<image src="http://img.feiyit.com/wl/b2.png"></image>
		</view>
		<scroll-view scroll-x class="bg-white nav bl-nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in redNav" :key="index" @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<view class="cu-list menu-avatar comment solids-top">
			<view class="cu-item">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
				<view class="content">
					<view class="text-grey"><text class="cu-tag bg-yellow radius">顶</text> 张三</view>
					<view class="tags">
						<text class="cu-tag line-blue radius">全新未使用</text>
						<text class="cu-tag line-blue radius">验货面付</text>
					</view>
					<view class="text-content">
						出售9成新防盗门厚重质量好，给钱就卖，尺寸2050CM*950CM
					</view>
					<view class="grid col-3 grid-square imgs">
						<view class="bg-img" style="background: url(http://img.feiyit.com/wl/user-back.png);"></view>
						<view class="bg-img" style="background: url(http://img.feiyit.com/wl/user-back.png);"></view>
						<view class="bg-img" style="background: url(http://img.feiyit.com/wl/user-back.png);"></view>
					</view>
					<view class="margin-top-sm flex justify-between">
						<view class="text-gray text-df">2018年12月4日</view>
						<view>
							<text class="cuIcon-commentfill"></text>
						</view>
					</view>
					<view class="hits text-grey">
						<text class="cuIcon-like icon text-blue"></text> 119次浏览
					</view>
				</view>
			</view>
			<view class="cu-item">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
				<view class="content">
					<view class="text-grey"><text class="cu-tag bg-yellow radius">顶</text> 张三</view>
					<view class="tags">
						<text class="cu-tag line-blue radius">全新未使用</text>
						<text class="cu-tag line-blue radius">验货面付</text>
					</view>
					<view class="text-content">
						出售9成新防盗门厚重质量好，给钱就卖，尺寸2050CM*950CM
					</view>
					<view class="grid col-3 grid-square imgs">
						<view class="bg-img" style="background: url(http://img.feiyit.com/wl/user-back.png);"></view>
						<view class="bg-img" style="background: url(http://img.feiyit.com/wl/user-back.png);"></view>
						<view class="bg-img" style="background: url(http://img.feiyit.com/wl/user-back.png);"></view>
					</view>
					<view class="margin-top-sm flex justify-between">
						<view class="text-gray text-df">2018年12月4日</view>
						<view>
							<text class="cuIcon-commentfill"></text>
						</view>
					</view>
					<view class="hits text-grey">
						<text class="cuIcon-like icon text-blue"></text> 119次浏览
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				m:{
					seoTitle:"二手物品"
				},
				cuIconList: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '电脑办公'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '家具家电'
				}, {
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '文体户外'
				}, {
					cuIcon: 'upstagefill',
					color: 'cyan',
					badge: 0,
					name: '服装配饰'
				}, {
					cuIcon: 'clothesfill',
					color: 'blue',
					badge: 0,
					name: '儿童母婴'
				}, {
					cuIcon: 'discoverfill',
					color: 'purple',
					badge: 0,
					name: '美容保健'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '数码产品'
				}],
				redNav:[{title:'最新'},{title:'推荐'},{title:'最火'}],
				TabCur: 0,
				scrollLeft: 0,
			};
		},
		async onLoad(){
			
			
		},
		onReachBottom(){
			
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
		}
	}
</script>

<style lang='scss'>
	.search-main{
		position: relative;
		height: 80px;
		padding:10px 0 15px 0;
		background-color:#1cbbb4;
		/* background-image:url('http://bt.img.feiyit.com//mobile/iconlss/bl-tbg.png'); */
		background-repeat:no-repeat;
		background-size:100% 100%;
		-moz-background-size:100% 100%;
		.headtitle{
			font-size: 20px;
			color: white;
			text-align: center;
			margin-bottom: 10px;
		}
		.cuIcon-back{
			font-size: 18px;
		}
	}
	.adv{
		height: 90px;
		image{
			width:100%;
			height: 90px;
		}
	}
	.bl-nav{
		.cu-item{
			margin:0px;
		}
	}
	.cu-list.menu-avatar.comment>.cu-item {
		padding: 30rpx 30rpx 30rpx 160rpx;
	}
	.bg-yellow{
		color: #ffffff;
		margin-right: 5px;
	}
	.text-content{
		color: #333333;
		padding:5px;
	}
	.tags{
		padding:10px 0 5px 0;
	}
	.cuIcon-commentfill{
		font-size: 22px;
		color: #8799a3;
	}
	.hits{
		margin-top: 10rpx;
		position: relative;
		padding:8rpx 20rpx;
		border-radius: 5px;
		background-color:#e6e7e8;
		.icon{
			margin-right: 5px;
			font-size: 20px;
			position:relative;
			top: 2px;
		}
		&:after{
			content: '';
			position:absolute;
			left: 20rpx;
			top: -10rpx;
			width:0;
			height:0;
			border-right:5px solid transparent;
			border-left:5px solid transparent;
			border-bottom:5px solid #e6e7e8;
		}
	}
</style>
